<template>
  <div class="page-box">
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"

    :current-page="childMsg.currentPage"
    :page-sizes="[10, 20, 30, 40]" :page-size="childMsg.pageSize"
    layout="total,prev, pager, next, jumper" :total="childMsg.total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'Pagination',
  props: ['childMsg'],
  data() {
    return {
      pageparm: {
        currentPage: this.childMsg.currentPage,
        pageSize: this.childMsg.pageSize
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageparm.pageSize = val
      this.$emit('callFather', this.pageparm)
    },
    handleCurrentChange(val) {
      this.pageparm.currentPage = val
      this.$emit('callFather', this.pageparm)
    }
  }
}
</script>

<style lang="less" scoped>
.page-box {
  margin-right: 20px;
}
/deep/ .el-pager li{
  border: 1px solid #D8D8D8;
  border-right: 0;
}
/deep/ .el-pager li:hover{
  color:#409EFF;
}
/deep/ .el-pager li.active{
  background-color: #409EFF;
  color: white;
  border-color: #409EFF;
}

/deep/ .el-pagination .btn-prev{
  border: 1px solid #D8D8D8;
  border-right: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
/deep/ .el-pagination .btn-prev:hover{
  color:#409EFF;
}
/deep/  .el-pagination .btn-next{
  border: 1px solid #D8D8D8 !important;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/deep/  .el-pagination .btn-next:hover{
  color:#409EFF;
}
/deep/ .el-pagination{
  .el-pagination__jump{
    margin-left: 15px;
  }
}
</style>
